<template>
  <div>
    <el-main>
      <div class="video-banner">
        <video
          id="videoPlayer"
          muted="muted"
          width="100%"
          src="@/assets/video/standard.mp4"
          autoplay="autoplay"
          loop
        ></video>
        <div id="searchWrapper" class="content-container-search">
          <div class="content-container flex">
            <div class="searchinput">
              <div class="el-input">
                <input
                  type="text"
                  id="waybillInput"
                  placeholder="最多输入10个运单号，请用空格键隔开"
                />
              </div>
              <div class="waybill-search-btn">
                <img src="@/assets/img/standard/fdj.png" alt="" />
              </div>
            </div>
            <div class="go-online-send">
              <img src="@/assets/img/standard/zxjj.png" alt="" />在线寄件
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <el-main id="second">
      <div class="second-content">
        <div class="second-item">
          <div class="grid-content bg-purple">
            <img src="@/assets/img/local_pic/image_respond@2x.jpg" />
            <h2>快速响应</h2>
            投诉一小时内主动反馈客户处理进度。
          </div>
        </div>
        <div class="second-item">
          <div class="grid-content bg-purple">
            <img src="@/assets/img/local_pic/image_claim@2x.jpg" />
            <h2>极速理赔</h2>
            赔偿金额一经双方确定，1小时内极速赔付到账。
          </div>
        </div>
        <div class="second-item">
          <div class="grid-content bg-purple">
            <img src="@/assets/img/local_pic/image_guarantee@2x.jpg" />
            <h2>安全保障</h2>
            默认3000元保价服务，未保价快件破损/丢失最高赔付3000元。
          </div>
        </div>
      </div>
    </el-main>
    <el-main id="serve">
      <p class="serve-title">增值服务</p>
      <template>
        <el-tabs :tab-position="tabPosition" style="height: 200px">
          <el-tab-pane label="保价服务">
            <h4>服务介绍</h4>
            <br />
            <p>
              客户在托寄快件时选择保价服务，需向极兔声明快件价值并按照保价费率支付保价服务费。在运输途中，由于极兔责任导致托寄物损坏或遗失的，我们将按照声明价值和实际损失的比例进行赔偿。赔偿金额不超过托寄保价时的声明价值。
            </p>
            <br />
            <h4>服务特色</h4>
            <br />
            <el-table :data="a">
              <el-table-column label="3000元以下免保"> </el-table-column>
              <el-table-column label="轻松投保"> </el-table-column>
              <el-table-column label="安全可靠"> </el-table-column>
              <el-table-column label="专属理赔"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="到付服务"></el-tab-pane>
          <h4>服务介绍</h4>
          <br />
          <p>
            快件运费不由寄件人支付给快递公司，而由收件人在确认签收时进行支付的服务。
          </p>
          <br />
          <h4>服务特色</h4>
          <br />
          <p>提供更灵活、自由的支付选择，满足客户的实际需求。</p>
          <br />
          <h4>收费标准</h4>
          <br />
          <p>官方指导价：运费*10%</p>
          <p>详情请咨询当地极兔网点 网点查询</p>
        </el-tabs>
      </template>
    </el-main>
    <el-main id="footer-banner">
      <p>对于国内有着更高安全保障需求的商务客户，极兔会提供定制化的</p>
      <p>寄递服务。详情请拨打全国统一客服热线956025进行咨询。</p>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: 'left',
      a: [],
      b: [],
      fees: [],
    }
  },
}
</script>

<style lang="scss" scoped>
// 引入重置样式
@import '/src/assets/css/base';
// 引入基础样式
@import '/src/assets/css/reset';
.video-banner {
  height: 100vh;
  width: 100%;
}
#videoPlayer {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.content-container-search {
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 99;
  display: flex;
}
.content-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.searchinput {
  width: 848px;
  z-index: 99;
  height: 78px;
  position: relative;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
#waybillInput {
  width: 848px;
  height: 78px;
  line-height: 78px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
  border-radius: 6px;
  border: none;
  padding-right: 146px;
  box-sizing: border-box;
  padding-left: 20px;
  background-color: #fff;
}
.waybill-search-btn img {
  width: 32px;
  height: 32px;
}
.waybill-search-btn {
  position: absolute;
  right: 0;
  width: 66px;
  height: 66px;
  background: #e60012;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  top: 6px;
  right: 6px;
}
.go-online-send {
  width: 320px;
  height: 78px;
  background: #fff;
  border-radius: 10px;
  margin-left: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 25px;
}
.go-online-send img {
  margin-right: 8px;
  width: 48px;
  height: 48px;
}
#second {
  width: 100%;
}
.second-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.second-item {
  width: 360px;
  margin-right: 56px;
  margin-top: 162px;
}
.second-item img {
  width: 360px;
  height: 420px;
  margin-bottom: 36px;
}
#serve {
  height: 600px;
}
.serve-title {
  font-size: 42px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #171717;
  line-height: 59px;
  margin-bottom: 48px;
  margin-top: 88px;
  display: flex;
  justify-content: center;
}
.el-tabs--left {
  width: 1200px;
  margin: 0 auto;
}
.el-table thead {
  height: 100px;
}
#footer-banner {
  background: url(@/assets/img/standard/footer-banner.png) no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 200px;
  background-size: cover;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  letter-spacing: 2px;
}
</style>
